<template>
   <div class="Main">
    <app-header></app-header>
    <div class="page_content">
        <x-card v-if="loading" class="bounce-loading">
          <bounce-loading></bounce-loading>
        </x-card>
        <x-card v-else  class="card">
          <div class="journal">
            <div class="journal_title">
              <div>{{ journal.journalTitle }}</div>
              <div><base-button type="primary" size="small" @click="addOrder(journal,'year')">购买整本</base-button></div>
            </div>
            <div class="journal_content">
              <div class="cover">
                <img :src="journal.coverImg ? journal.coverImg.replace('http://124.16.154.205:9000/','/minioUrl/') : '../assets/images/home/news_cover.png'" />
                <div><base-button type="info" size="small" class="is_light"><router-link to="/microapp/eprint/preSubmitUpload">期刊投稿</router-link></base-button></div>
                <div class="journal_content_icon" @click="collection(journal)"><img class="icon" :src="journal.userCollectionStatus == 1 ? require('../assets/images/page/collect_active.png') : require('../assets/images/page/collect.png')" />收藏</div>
              </div>
              <div class="right">
                <div class="right_item">
                  <div class="right_item_left">ISSN：</div><div class="right_item_right">{{ journal.issn }}</div>
                </div>
                <div class="right_item"><div class="right_item_left">CN：</div><div class="right_item_right">{{ journal.cn }}</div></div>
                <div class="right_item"><div class="right_item_left">出版周期：</div><div class="right_item_right">{{ journal.period }}</div></div>
                <div class="right_item"><div class="right_item_left">主办单位：</div><div class="right_item_right">{{ journal.organizerIns }}</div></div>
                <div class="right_item" v-if="journal.coreInclusion"><div class="right_item_left">核心收录：</div><div class="right_item_right">{{ journal.coreInclusion }}</div></div>
                <div class="right_item"><div class="right_item_left">杂志社：</div><div class="right_item_right">{{ journal.sysMagazine.magazineName }}</div></div>
                <div class="right_item"><div class="right_item_desc">{{ journal.journalDesc }}</div></div>
              </div>
            </div>
            <div>
              <base-tabs type="border-card">
                  <base-tab-pane label="期刊浏览">
                      <div v-if="loadingArticle"  class="bounce-loading">
                          <bounce-loading></bounce-loading>
                      </div>
                      <div  v-else class="article">
                        <div v-if="articleList && articleList.length > 0">
                          <div class="article_total">
                            <div class="total">本期论文共<span class="num">{{ total }}</span>条</div>
                            <div class="select">
                              <base-select v-model="searchParam.year" placeholder="年" @change="getArticle" clearable>
                                    <base-option
                                      v-for="item in yearAgg"
                                      :key="item.value"
                                      :label="item.value"
                                      :value="item.value">
                                    </base-option>
                                </base-select>
                            </div>
                            <div class="select">
                              <base-select v-model="searchParam.issue" placeholder="期" @change="getArticle" clearable>
                                    <base-option
                                      v-for="item in issueAgg"
                                      :key="item.value"
                                      :label="item.value"
                                      :value="item.value">
                                    </base-option>
                                </base-select>
                            </div>
                            <div style="margin-left: auto;"><base-button type="primary" size="small" @click="addOrderIssue(journal,'issue')">购买整期</base-button></div>
                          </div>
                          <div class="item" v-for="item,index in articleList" :key="index">
                              <div class="item_title">
                                <span class="number_order">{{ (searchParam.page-1) * searchParam.size + index + 1 }} . </span>
                                <span><router-link
                                      :to="`/microapp/eprint/absDetail/${item.csoaid}`"
                                      class="NewYYB__link"
                                    >{{ item.title }}</router-link>
                                </span>
                              </div>
                              <div class="item_author">
                                <i class="base-icon-s-custom"></i>  {{ item.authors }}
                              </div>
                              <div class="item_info">
                                <div>《{{ item.sysJournal.journalTitle }}》</div>
                                <div v-if="item.year">{{ item.year }} , </div>
                                <div v-if="item.volume">Volume {{ item.volume }} , </div>
                                <div v-if="item.pagerange">Pages {{ item.pagerange }}</div>
                              </div>
                              <div class="item_desc" v-if="item.enabstracts">
                                <span v-if="item.expend">
                                  {{ item.enabstracts }}
                                  <span  @click="item.expend = false"><base-button type="primary" size="small" class="expend">收起<i class="base-icon-arrow-up"></i></base-button></span>
                                </span>
                                <span v-if="!item.expend">
                                  {{ item.enabstracts.slice(0,200) }}...
                                  <span  @click="item.expend = true"><base-button type="primary" size="small" class="expend">展开<i class="base-icon-arrow-down"></i></base-button></span>
                                </span>
                              </div>
                          </div>
                          <div class="page-warp">
                            <base-pagination
                                @current-change="getArticle"
                                background
                                layout="prev, pager, next"
                                :total="total"
                                :page-size="searchParam.size"
                                :current-page.sync="searchParam.page"
                            ></base-pagination>
                        </div>
                        </div>
                        <div v-else>
                            <base-empty description="暂无论文"></base-empty>
                        </div>
                      </div>
                      
                  </base-tab-pane>
              </base-tabs>
            </div>
          </div>
        </x-card>
    </div>
    <app-footer></app-footer>
  </div>
</template>

<script>
import AppHeader from './components/AppHeader.vue'
import AppFooter from './components/AppFooter.vue'
import {GetEntityJournal,GetAllArticle,GetArticleAgg} from "@/service/journal";
import {XCard} from "@zkwq/business";
import {EditOrder} from '../service/order'
import {AddCollection,CancelCollection} from '../service/collection'
export default {
  name: 'JournalDetail',
  components: {
    AppHeader,
    AppFooter,
    XCard
  },
  data() {
    return {
      loading:false,
      loadingArticle:false,
      journalId:'',
      journal:{},
      searchParam:{
        page:1,
        size:10,
        streage:"all",
        title:'',
        authors:'',
        journalRef:'',
        year:'',
        issue:'',
        sysJournalId:'',
      },
      articleList:[],
      total:0,
      options:[{label:2025,value:2025},{label:2024,value:2024},{label:2023,value:2023}],
      optionsA:[{label:"第一期",value:1},{label:"第二期",value:2},{label:"第三期",value:3}],
      yearAgg:[],
      issueAgg:[],
    }
  },
  mounted() {
    this.journalId = this.$route.params.id;
    this.searchParam.sysJournalId = this.journalId;
    this.getDetail();
    this.getArticle();
    this.getArticleAgg();
  },
  methods: {
    getDetail(){
      this.loading = true;
      GetEntityJournal(this.journalId).then(e => {
          if (e && e.data){
              this.loading = false;
              this.journal = e.data;
          }
      }).catch(e => {
          this.$message.error(e.message)
      })
    },
    getArticle(){
        this.loadingArticle = true;
        GetAllArticle(this.searchParam).then(e => {
            if (e && e.data && e.data.records){
                this.articleList = e.data.records;
                this.total = e.data.total;
                this.articleList.forEach(item =>{
                    if (null == item.journalSelectStatus){
                        item.journalSelectStatus = 4;
                    }
                    this.$set(item, 'expend', false);
                })
                this.loadingArticle = false;
            }
        }).catch(e => {
            this.$message.error(e.message)
        })
    },
    getArticleAgg(){
      GetArticleAgg(this.searchParam).then(e => {
          if (e && e.data){
            this.yearAgg = e.data.yearAgg;
            this.issueAgg = e.data.issueAgg;
          }
      }).catch(e => {
          this.$message.error(e.message)
      })
    },
    addOrder(item,type){
        let params = {
            orderUserId: this.user.id,
            orderResourceList:[{
                resourceId: item.id,
                resourceType: 'journal',
                resourceName: item.journalTitle,
                unitPrice: type == 'year' ? item.yearPrice : item.singlePrice,
                realPaid: type == 'year' ? item.yearPrice : item.singlePrice
            }]
        }
        EditOrder(params).then(res => {
            if (res.code == -1) {
                this.$message.error(res.msg);
                return;
            }
            this.$message.success(res.msg);
            // window.open(this.$router.resolve("/order/"+res.data.id).href)
        })
    },
    addOrderIssue(item,type){
      if (!this.searchParam.year || !this.searchParam.issue){
         this.$message.warning("请先选择期数");
         return;
      }
      this.addOrder(item,type);
    },
    //收藏
    collection(item){
        if (item.userCollectionStatus == 1){
            CancelCollection({resourceId: item.id, resourceType: 1}).then(res => {
                if (res.code == -1) {
                    this.$message.error(res.msg);
                    return;
                }
                this.$set(item,'userCollectionStatus',2)
                this.$set(item,'countCollection',item.countCollection -= 1)
                this.$message.success(res.msg);
            })
        }else {
            AddCollection({resourceId: item.id, resourceType: 1}).then(res => {
                if (res.code == -1) {
                    this.$message.error(res.msg);
                    return;
                }
                this.$set(item,'userCollectionStatus',1)
                this.$set(item,'countCollection',item.countCollection += 1)
                this.$message.success(res.msg);
                // window.open(this.$router.resolve("/usercenter/").href)
            })
        }
    },
  },
  watch: {
    
  }
}
</script>

<style lang="scss" scoped>
.Main{
    height:100%;
    width: 100%;
    overflow: auto;
    .bounce-loading{
        height:70vh;
        align-items: center;
        justify-content: center;
        display: flex;
    }
    .base-button--primary {
        background-color: #3F7FA7;
        border-color: #3F7FA7;
    }
    .base-select{
      width: 100px;
      margin-right: 20px;
    }
    .base-input__placeholder{
        left: 12px;
    }
    .page-warp{
      width: 100%;
      text-align: center;
      margin-top: 40px;
    }
    .page_content{
        min-height: calc(100vh - 288px);
        position: relative;
        width: 1200px;
        margin: 20px auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        .card{
            padding: 18px 0px;
            .journal{
              display: block;
              .journal_title{
                  font-size: 22px;
                  font-weight: 600;
                  font-synthesis: style;
                  line-height: 32px;
                  color: #2f3a91;
                  display: flex;
                  justify-content: space-between;
              }
              .journal_content{
                display: flex;
                margin: 10px 0px;
                .cover{
                  margin-right: 30px;
                  img{
                     width: 124px;
                    height: 170px;
                  }
                }
                .right{
                  font-size: 15px;
                  font-weight: 600;
                  .right_item{
                    margin-bottom: 14px;
                    display: flex;
                    .right_item_left{
                        color: #97a3b7;
                        margin-right: 4px;
                    }
                    .right_item_right{
                      color: #121212;
                    }
                    .right_item_desc{
                        line-height: 30px;
                        font-weight: 500;
                        overflow: hidden;
                        max-height: 88px;
                        display: -webkit-box;
                        -webkit-line-clamp: 3;
                        -webkit-box-orient: vertical;
                    }
                  }
                }
                .journal_content_icon{
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      cursor: pointer;
                      .icon{
                          width: 20px;
                          height: 20px;
                      }
                    }
                    .is_light{
                        border-color: #2f3a91;
                        color: #2f3a91;
                        background-color: #fff;
                        border-radius: 20px;
                        border: thin solid #8590a6;
                        margin: 10px 0px;
                        width: 100%;
                    }
              }
              .article{
                padding: 10px;
                .article_total{
                  display: flex;
                  align-items: center;
                  .total{
                      font-size: 16px;
                      color: #8590a6;
                      white-space: nowrap;
                      line-height: 32px;
                      margin-right: 20px;
                      .num{
                          font-weight: 600;
                          color: #2f3a91;
                          margin: 0px 5px;
                      }
                  }
                }
                .item{
                  margin: 10px 0px;
                  line-height: 30px;
                  .item_title{
                      font-size: 18px;
                      color: #2f3a91;
                      font-weight: 600;
                      font-synthesis: style;
                      line-height: 1.6;
                      word-break: break-word;
                      cursor: pointer;
                      -webkit-transition: color .3s;
                      .number_order{
                        font-size: 15px;
                        color: #646464;
                        margin-left: 6px;
                      }

                  }
                  .item_author{
                    margin-top: 6px;
                    font-weight: 600;
                    font-size: 15px;
                    color: #4b5b76;
                    margin-left: 30px;
                  }
                  .item_info{
                    display: flex;
                    margin-top: 10px;
                    font-weight: 500;
                    color: #4b5b76;
                    font-size: 15px;
                    margin-left: 30px;
                  }
                  .item_desc{
                    color: #97a3b7;
                    font-size: 15px;
                    margin-left: 30px;
                    .expend{
                      color: #2f3a91;
                      background: transparent;
                    }
                  }
                }
              }
              
            }
        }
      }
}
</style>
